import React, { FC, useEffect } from 'react';
import { Row, Col, Card } from 'antd';
import styles from './recommend-mv.less';
import {
  connect,
  IndexModelState,
  ConnectProps,
  SongListModelState,
} from 'umi';
import { tranNumber } from '../../utils';
import CardCover from '@/compoments/cardCover/cardCover';

interface PageProps extends ConnectProps {
  songList: SongListModelState;
  index: IndexModelState;
  dispatch: any;
}

interface ConnectState {
  songList: SongListModelState;
  index: IndexModelState;
}

const MV: FC<PageProps> = (props: any) => {
  const { mvList = [] } = props.index;
  let getData = () => {
    props.dispatch({
      type: 'index/getMNList',
    });
  };

  useEffect(() => {
    getData();
  }, []);

  return (
    <div className={styles.recommendMv}>
      <div className={styles.index__hd}>
        <h2 className="index__tit">
          推荐MV
          <small>更多</small>
        </h2>
      </div>

      <Row gutter={25}>
        {mvList.map((data: any, index: number) => (
          <Col className="gutter-row" span={6} key={index}>
            <Card
              hoverable
              className="cartItem"
              bodyStyle={{ padding: '20px 15px 0 15px', height: '110px' }}
              cover={
                <CardCover
                  data={data}
                  imgLabel={'picUrl'}
                  type={'mv'}
                ></CardCover>
              }
            >
              <div className={styles.cartMeta}>
                <p className={styles.ant_card_meta_title}>{data.name}</p>
                <p className={styles.ant_card_meta_description}>
                  播放量：{tranNumber(data.playCount, 2)}
                </p>
              </div>
            </Card>
          </Col>
        ))}
      </Row>
    </div>
  );
};

export default connect(({ index, songList }: ConnectState) => {
  return { index, songList };
})(MV);
